<template>
  <div class="login-page">
    <a-row class="login-row" justify="center" >
      <a-col :xs="22" :sm="16" :md="10" :lg="8" :xl="6">
        <a-card :bordered="false" class="login-card">
          <div class="brand">
            <div class="title">系统登录</div>
          </div>
          <a-form ref="formRef" :model="loginObj" :rules="rules" layout="vertical" @finish="loginFun">
            <a-form-item name="username" label="用户名">
              <a-input v-model:value="loginObj.username" placeholder="请输入用户名" allow-clear />
            </a-form-item>
            <a-form-item name="password" label="密码">
              <a-input-password v-model:value="loginObj.password" placeholder="请输入密码" />
            </a-form-item>
            <div class="actions">
              <a-button type="primary" html-type="submit" :loading="submitting" block>登录</a-button>
            </div>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
  
</template>

<script setup>
import { reactive, ref } from 'vue'
import axiosEl from '@/utils/axiosEl'
import { useRouter} from 'vue-router'
const formRef = ref()
const submitting = ref(false)

const router = useRouter()
const loginObj = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const loginFun = async () => {
  try {
    submitting.value = true
    const resData = await axiosEl({
      method: 'post',
      url: '/admin/login',
      data: loginObj
    })
    console.log(resData, '登录后的数据')
    router.push("/layout/user")
    // 可在此根据返回结果做跳转或存储 token
    // if (resData?.data?.token) localStorage.setItem('token', resData.data.token)
  } finally {
    submitting.value = false
  }
}
</script>

<style lang='scss' scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f5ff 0%, #ffffff 100%);
}

.login-row {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.login-card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  .logo {
    width: 32px;
    height: 32px;
  }
  .title {
    font-size: 18px;
    font-weight: 600;
  }
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}
</style>